<style lang="scss" scoped></style>

<template>
  <div class="root-flex-page">
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="router.push({ name: 'keke-admin' })"
    >
      <template #title>
        <p style="-webkit-app-region: drag">扫码排队</p>
      </template>
    </van-nav-bar>
    <div class="h-0 flex-1 p-8">
      <div class="qrcode flex max-h-full rounded-xl bg-slate-200 p-4 shadow-lg">
        <img
          class="mx-auto max-h-full rounded-xl object-contain"
          :src="qrCode"
          alt=""
          srcset=""
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import qrCode from 'imgs/pakchoi.windystory.png'

const router = useRouter()
const { $gsap: gsap } = useNuxtApp()
onMounted(() => {
  gsap.fromTo(
    '.qrcode',
    {
      rotate: 90,
      clipPath: 'polygon(60% 100%, 40% 0%, 40% 0%, 60% 100%)',
    },
    {
      rotate: 0,
      clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
      duration: 0.7,
    },
  )
})
</script>
